arg.horizontalLayoutScroll = (function() {
	
	var totalLoadedArticles = 2;
	arg.horizontalLayoutScrollImpl(totalLoadedArticles);

})

arg.horizontalLayoutScrollImpl = function(totalLoadedArticles) {
	
	$('a.layout_button_back').click(function() {
		var selected = $(this);
		$('#wrapper').scrollTo(selected.attr('href'), 800);
		
		return false;
	});

	$('a.layout_button_next').click(function() {
		
		var selected = $(this);
		var numberOfArticle = selected.parent().children('.numberOfArticle').html();
		
		var aux = numberOfArticle + 1;
		if (aux = totalLoadedArticles && totalLoadedArticles < 5) {
			
			$.getJSON("test.js", function(json){
			articleJson = json;
		 });
		
			var prev = totalLoadedArticles;
			totalLoadedArticles++;
			var next = totalLoadedArticles + 1;
			
			if (totalLoadedArticles == 5) {
				next = 1;
			}
			
			var articleHTML = 
				'<div id="item' + totalLoadedArticles + '" class="item">'
					+ '<div class="content">'
						+ '<a class="layout_button_back layout_button" href="#item'+ prev +'"><img src="/images/prev_arrow.jpg" alt="Previous Arrow"/></a> '			               		
						+ '<a class="layout_button_next layout_button" href="#item' + next + '"><img src="/images/next_arrow.jpg" alt="Next Arrow"/></a> '			
						+ '<span class="numberOfArticle displayNone">' + totalLoadedArticles + '</span>'
						+ '<span class="articleTitle">Article ' + totalLoadedArticles + '</span>'
						+ '<span class="articleContent">generated</span>'
					+ '</div>'
				+ '</div>';
			
			var mask = selected.parent().parent().parent();
			mask.html(mask.html() + articleHTML);
			
			arg.horizontalLayoutScrollImpl(totalLoadedArticles);
		}
		
		$('#wrapper').scrollTo(selected.attr('href'), 800);
		return false;
	});

}